<template>
  <uni-nav-bar title="订单" left-icon="left" color="#333" @clickLeft="navBack" statusBar></uni-nav-bar>
  <!-- 说明性标题 -->
  <Explain :text="text" v-if="type"></Explain>
  <!-- 日期选择 -->
  <DataTime @timeSelection="timeSelection" :fillITop="fillITop"></DataTime>
  <!-- 订单列表 -->
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
  >
    <OrderList :orderLists="orderLists"></OrderList>
    <uni-load-more v-if="hasOrders" :status="loadStatus" color="#ccc"></uni-load-more>
    <view v-else class="fillings" :style="{ height: pageHeight + 'px' }">
      <image :src="Empty2"></image>
      <text>暂无订单</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { orderList } from '@/gql/customer';
import { getDriverID } from '@/stores/driverID';
import { useUserStore } from '@/stores/user';
import { navBack } from '@/utils/navigator';
import { errorToast } from '@/utils/prompt';
import DataTime from '@c/customers/dataTime.vue';
import Explain from '@c/customers/explain.vue';
import OrderList from '@c/customers/orderList.vue';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { computed, Ref, ref } from 'vue';
import { Empty2} from '@/utils/Static';

// static
const userInfo = useUserStore();
const driver_id = getDriverID();
const customers_id = computed(() => userInfo.customers_id);
const fillID = ref(0); //加注机ID
const type = ref('');
const text = ref('');
const pageHeight = ref('');
const orderLists = ref([]);
const hasOrders = computed(() => orderLists.value.length > 0);
const fillITop: Ref<any> = ref({}); //头部信息
// data
let start = ''; //开始时间
let end = ''; //结束时间
const currentPage = ref(1); //页数
const lastPage = ref(1); //总页数
const isLoading = ref(false);
const loadStatus = computed(() => (isLoading ? 'loading' : currentPage.value < lastPage.value ? 'more' : 'noMore'));

onLoad((options) => {
  fillID.value = Number.parseInt(options.id);
  type.value = options.type;
  const name = '安蓝大客户-' + uni.getStorageSync('customersName') + '专享加注单-';
  text.value = options.id ? name + options.type + '加注机' : name + options.type + '车辆';
  //获取可视区域的高度
  uni.getSystemInfo({
    success(res) {
      pageHeight.value = (type ? res.windowHeight - 230 : res.windowHeight - 160).toString();
    },
  });
});

function timeSelection(num) {
  start = num.start;
  end = num.end;
  lastPage.value = 1;
  orderLists.value = [];
  orderFill();
}

/**
 * 获取订单记录
 */
function orderFill() {
  isLoading.value = true;
  const fill_id = fillID.value ? fillID.value : 0;
  const payload = {
    query: orderList,
    variables: {
      customers_id,
      driver_id,
      start,
      end,
      page: lastPage,
      cart_code: type,
      fill_id,
    },
  };
  toPublish(
    'customers/fill_order_list',
    payload,
    (obj: any) => {
      isLoading.value = false;
      const { fill_order_list } = obj.data;
      fillITop.value = fill_order_list;
      orderLists.value = [...orderLists.value, ...fill_order_list.list];
      lastPage.value = fill_order_list.lastpage;
    },
    () => {
      errorToast('通讯异常');
      isLoading.value = false;
    },
  );
}

/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    orderFill();
  }
}
</script>

<style scoped lang="less">
.fillings {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    width: 400rpx;
    height: 400rpx;
  }
}
</style>
